<template>
  <div>
    <div class="wrapper-drag">
      <div @dragstart="handleDragStart" class="components">
        <template v-for="(item, index) in componentList">
          <div class="listStyle" draggable :data-index="index">
            <span>{{ item.label }}</span>
          </div>
        </template>
      </div>
      <div class="barcodeDIV">
        <neo-barcode
          :options.sync="options"
          @onActivated="onActivated"
          @onDeactivated="onDeactivated"
          ref="barcode"
          :propValues="propValues"
          :componentOptions="componentOptions"
        >
        </neo-barcode>
      </div>
      <Button type="primary" @click="print">打印JSON数据</Button>
    </div>
    <!-- <div class="wrapper-drag">
      <div
        class="dragDiv"
        id="dragDiv"
        @mousedown="mounseDown"
        @mouseup="mouseUp"
      ></div>
    </div> -->
  </div>
</template>

<script>
import Options from "./settings/options";
import ComponentOptions from "./settings/componentOptions";
import { addEvent, removeEvent } from "./utils/dom";
export default {
  name: "App",
  data() {
    return {
      //控件信息
      componentList: [
        { label: "横线", type: "hLine", icon: "" },
        { label: "竖线", type: "vLine", icon: "" },
        { label: "文字列", type: "words", icon: "" },
        { label: "二维码", type: "qrcode", icon: "" },
        { label: "条形码", type: "barcode", icon: "" },
        { label: "图片", type: "image", icon: "" },
      ],
      selectedItem: {},
      options: Options,
      componentOptions: ComponentOptions,
      propValues: [
        {
          key: "1",
          value: "https://file.iviewui.com/dist/7dcf5af41fac2e4728549fa7e73d61c5.svg",
        },
        { key: "2", value: "你好" },
        { key: "3", value: "哈哈" },
        { key: "6", value: "我我我我" },
        { key: "7", value: "6666" },
      ],
      mouse: { x: 0, y: 0 },
      isDown: false,
      vNode: null,
      adsorption: 50, //吸附距离
    };
  },
  watch: {
    "options.type": {
      handler(val) {
        if (val == "readOnly") {
          this.options.content.map((el) => {
            this.$set(el, "draggable", false);
            this.$set(el, "resizable", false);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  components: {},
  methods: {
    mounseDown(e) {
      if (e.stopPropagation) e.stopPropagation();
      this.mouse.x = e.clientX;
      this.mouse.y = e.clientY;
      this.isDown = true;
      this.vNode = document.getElementById("dragDiv");
      this.vNode.style.cursor = "move";
      addEvent(document.documentElement, "mousemove", this.mouseMove);
    },
    mouseUp(e) {
      //开关关闭
      this.isDown = false;
      this.mouse.x = 0;
      this.mouse.y = 0;
      this.vNode.style.cursor = "default";
    },
    mouseMove(e) {
      if (this.isDown == false) {
        return;
      }
      const { clientX: currX, clientY: currY } = e;
      if (currX < 0 || currX > 900 || currY < 0 || currY > 900) {
        this.mouseUp(e);
        return;
      }
      const { x, y } = this.mouse;
      let el = this.vNode;
      let nl = currX - x + el.offsetLeft;
      let nt = currY - y + el.offsetTop;

      //限制范围
      if (nl <= 0) nl = 0;
      if (nt <= 0) nt = 0;
      if (nl + el.clientWidth >= 900) nl = 900 - el.clientWidth;
      if (nt + el.clientHeight >= 900) nt = 900 - el.clientHeight;

      //吸附功能
      if (currX - x < 0 && nl <= this.adsorption) nl = 0;
      if (currY - y < 0 && nt <= this.adsorption) nt = 0;
      if (currX - x > 0 && nl + el.clientWidth >= 900 - this.adsorption)
        nl = 900 - el.clientWidth;
      if (currY - y > 0 && nt + el.clientHeight >= 900 - this.adsorption)
        nt = 900 - el.clientHeight;

      el.style.left = nl + "px";
      el.style.top = nt + "px";
      this.mouse.x = currX;
      this.mouse.y = currY;
    },
    /**
     * 打印JSON格式数据
     * @author 丁鹏
     * @date 2021-10-15
     * @returns {any}
     */
    print() {
      console.log(JSON.stringify(this.options));
    },
    /**
     * 选中组件回调
     * @author 丁鹏
     * @date 2021-09-18
     * @param {any} item 选中的组件信息
     */
    onActivated(item) {
      this.selectedItem = item;
    },

    /**
     * 当点击组件空白地方
     * @author 丁鹏
     * @date 2021-09-14
     * @returns {any}
     */
    onDeactivated() {
      this.selectedItem = {};
    },

    /**
     * 控件拖动时回调
     * @author 丁鹏
     * @date 2021-09-14
     * @param {any} e 回调参数
     */
    handleDragStart(e) {
      e.dataTransfer.setData("index", e.target.dataset.index);
      e.dataTransfer.setData("type", this.componentList[e.target.dataset.index].type);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.wrapper-drag {
  width: 900px;
  height: 900px;
  border: 2px solid black;
  position: relative;
  background: #f1f2f6;
  //   margin: 0 auto;
  overflow: hidden;
  .components {
    display: inline;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    .listStyle {
      width: 50px;
      height: 50px;
      border: black 1px solid;
      display: inline-block;
      margin: 10px 10px 20px 10px;
      background: #d8ffff;
      span {
        display: block;
        margin-top: 100%;
        text-align: center;
      }
    }
  }
  .contentInfo {
    margin: 20px;
    span {
      width: 100%;
      display: inline-block;
      text-align: center;
    }
  }
  .barcodeDIV {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: white;
    box-shadow: 5px 5px 10px #888888;
  }
  .dragDiv {
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: blue;
  }
}
</style>
